<template>
	<div class="root">
		<!-- 头部 -->
		<div class="header">
			<div class="header_title">
				<h1>小兔鲜儿</h1>
				<p>新鲜·亲民·快捷</p>
			</div>
			<div class="search">
				<input type="search" placeholder="搜索商品">
			</div>
		</div>
		<!-- 占位 -->
		<div class="none">

		</div>
		<!-- 轮播图 -->
		<div class="carousel">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="item in bannerList"><img :src="item.imgUrl" alt="" /></van-swipe-item>
			
			</van-swipe>
		</div>
		

		<!-- 分类 -->
		<div class="classification">
			<div class="class_item" v-for="item in iconList" :key="item.id">
				<div class="class_item_img">
					<img :src="item.icon" alt="" />
				</div>
				<div class="class_item_p">
					<p>{{item.name}}</p>
				</div>

			</div>
		</div>

		<!-- 推荐 -->
		<div class="recommend">
			<div class="recommend_box">
				<div class="recom_item" v-for="item in recommendList" :key="item.id">
					<div class="recom_item_title">
						<div class="recom_item_title1">
							<h1>{{item.title}}</h1>
						</div>
						<div class="recom_item_title2">
							<p>{{item.alt}}</p>
						</div>
					</div>
					<div class="recom_item_img" @click="goto_recommend(item.id)">
						<img :src="img" alt="" v-for="(img,index) in item.pictures" :key="index" />
					</div>

				</div>
			</div>
		</div>

		<!-- 猜你喜欢 -->
		<guess></guess>


		<!-- 底部 -->
		<foot></foot>

	</div>
</template>

<script>
	// 引入组件
	import foot from '../../components/foot/index.vue'
	//引入mapstate
	import {
		mapState
	} from 'vuex'

	export default {
		name: 'home',
		data() {
			return {

			}
		},
		mounted() {

			this.getData()

		},
		methods: {
			//获取数据
			getData() {
				// 获取轮播图数据
				this.$store.dispatch('homeStore/bannerList')

				//获取分类图标
				this.$store.dispatch('homeStore/iconList')
				//获取热门推荐
				this.$store.dispatch('homeStore/recommendList')
				
				
				

			},
			// 进入推荐页面
			goto_recommend(key){
				this.$router.push({
					name:'recommend',
					query:{
						key
					}
				})
			}
		},
		computed: {
			...mapState("homeStore", ["bannerList", "iconList","recommendList"]),
		}
	}
</script>

<style lang="scss">
	.root {

		width: 100%;
		height: 100%;
		background-color: #F7F7F7;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		justify-content: center;
		align-items: flex-start;

		// 头部
		.header {

			z-index: 999;
			position: fixed;
			width: 100%;
			height: 10%;
			display: flex;
			flex-wrap: wrap;
			background-color: #55BC9E;

			.header_title {
				width: 100%;
				height: 40%;
				display: flex;


				h1 {
					width: 30%;
					height: 100%;
					font-size: 40px;
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				p {
					width: 70%;
					height: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 27px;
					color: white;
				}
			}

			.search {
				width: 100%;
				height: 60%;
				display: flex;
				justify-content: center;
				align-items: center;

				input {
					width: 90%;
					height: 50%;
					border-radius: 30px;
					outline: none;
					border: none;
					padding-left: 40px;
					background-color: white;
					opacity: 0.6;
					font-size: 25px;
				}
			}
		}

		// 占位
		.none {
			width: 100%;
			height: 10%;
		}

		// 轮播图

		.carousel {

			width: 100%;
			height: 18%;

			.my-swipe {
				color: #fff;
				font-size: 20px;
				line-height: 100%;
				padding: 0;
				box-sizing: border-box;
				text-align: center;

				img {
					width: 99%;
					height: 100%;
				}
			}

		}

		// 分类
		.classification {
			width: 100%;
			height: 22%;
			background-color: #F7F7F7;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			box-sizing: border-box;

			.class_item {
				width: 20%;
				height: 50%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;

				.class_item_img {
					width: 100%;
					height: 70%;
					display: flex;
					justify-content: center;
					align-items: center;

					img {
						width: 60%;
						height: 68%;
					}
				}

				.class_item_p {
					width: 100%;
					height: 30%;
					display: flex;
					justify-content: center;
					align-items: center;

					p {
						width: 100%;
						height: 100%;
						font-size: 25px;
						text-align: center;
					}

				}
			}
		}

		// 推荐

		.recommend {
			width: 100%;
			height: 31%;

			background-color: #F7F7F7;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;

			.recommend_box {
				width: 95%;
				height: 90%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;

				.recom_item {
					background-color: #FFFFFF;
					box-sizing: border-box;
					border-radius: 5px;
					padding: 2px;
					margin: 4px;
					width: 48%;
					height: 50%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;

					.recom_item_title {
						width: 100%;
						height: 20%;
						display: flex;
						justify-content: flex-start;
						align-items: center;

                         .recom_item_title1{
							 width: 40%;
							 height: 100%;
							 display: flex;
							 justify-content: flex-start;
							 align-items: center;
							 h1 {
							 	font-size: 28px;
							 	padding-left: 20px;
							 }
						 }
						
                         .recom_item_title2{
							 width: 60%;
							 height: 100%;
							 display: flex;
							 justify-content: center;
							 align-items: center;
							 p{
							 	font-size: 22px;
							 	color: gray;
							 }
						 }
						
					}

					.recom_item_img {
						width: 100%;
						height: 80%;
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							margin-left: 10px;
							width: 45%;
							height: 90%;
							border-radius: 5px;
						}
					}
				}
			}
		}





	}
</style>